<template>
    <div>
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
        </div>
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>领料单查询</p>
            </div>
        </div>
        <div class="body">
            <ul v-for="item in detail_list" :key="item.id" v-on:click="target_for(item.picklistId,item.facilityId)">
                <li>
                    <span class="left">领料单据号：</span>
                    <span class="right">{{item.picklistId}}</span>
                </li>
                <li>
                    <span class="left">单据日期：</span>
                    <span class="right">{{item.createdStamp}}</span>
                </li>
                <li>
                    <span class="left">领料人：</span>
                    <span class="right">{{item.receivePersonName}}</span>
                </li>
            </ul>
        </div>
        <div class="mask" v-show="mask_show">
            <span>暂无领料单</span>
        </div>
    </div>
</template>
<script>
import smalloading from './../loading/smalloading'
export default {
    name: "component_name",
    data() {
        return {
            detail_list: [],
            isModal: true,
            mask_show: false
        }
    },
    components: {
        smalloading
    },
    methods: {
        back: function() {
            this.$router.push({ path: "/Nav" });
        },
        load_list: function() {//参数取消　facilityId: 'WebStoreWarehouse', picklistId: 'MP10020'
            this.isModal = true;
            this.$http.post("api/motor/getPicklistInfo", { storcode: localStorage.getItem('storcode') }).then(res => {
                this.isModal = false;
                let result = res.data;
                console.log(result)
                if (result.code == 101) {
                    this.isModal = false;
                    this.$layer.alert("当前用户已在其他设备登录")
                    this.$router.push({ path: '/' })
                    localStorage.removeItem("authorization");
                    return;
                }
                if (result.result_list.length == 0) {
                    this.mask_show = true;
                    //this.$layer.alert('暂无领料')
                }
                this.detail_list = result.result_list;
            }, err => {
                this.isModal = false;
                this.$layer.alert("未知错误")
                this.$router.push({ path: '/' })
                localStorage.removeItem("authorization");
            })
        },
        target_for: function(picklistId, facilityId) {
            sessionStorage.setItem("picklistId", picklistId);
            sessionStorage.setItem("facilityId", facilityId);
            this.$router.push({ path: '/MaterialAffirm' })
        }
    },
    created: function() {
        this.load_list();
        if (sessionStorage.getItem('sign_img')) {
            sessionStorage.removeItem('sign_img');
        }
        sessionStorage.removeItem('product_list_ll');
        sessionStorage.removeItem('product_list_QR');
    }
}
</script>
<style lang="css" scoped>
.loadiv {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
}

.loading {
    margin: 60% auto;
    z-index: 22;
}

.body {
    margin: 1rem 0;
    background: #fff;
}

ul {
    margin-top: 1rem;
    box-shadow: 0px 2px 4px #999;
}

li {
    font-size: 1.3rem;
    color: gray;
    height: 2rem;
    line-height: 2rem;
}

.left {
    padding: 0 1rem;
    display: inline-block;
    /* width: 60%; */
}

.right {
    float: right;
    margin-right: 5px;
}

.mask {
    left: 0;
    top: 0;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    padding-top: 50%;
}

.mask span {
    width: 100%;
    font-size: 18px;
    margin-left: 37%;
    font-weight: bold;
    color: gray;
}

.arrow {
    border: 0.15rem solid #fff;
    border-width: 0.15rem 0 0 0.15rem;
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(135deg);
    -webkit-transition: all .5s ease-in .1s;
    transform-origin: center center;
    transform: rotate(-45deg);
    transition: all .5s ease-in .1s;
}

.return {
    width: 39%;
    padding-left: 1.5rem;
}

.back {
    font-size: 1.3rem;
    color: #fff;
}

.nav {
    line-height: 4.7rem;
    display: -webkit-box;
    background: #668292;
    height: 4.7rem;
}

.nav_text {

    font-size: 1.6rem;
    color: #fff;
}
</style>